<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

    <script src="js/amazon-connect-chat-interface.js"></script>
</head>
<body>

    <style>
    </style>

    <div>
        <section class="section-main" id="section-main" style="position: absolute; float: left; width: 50%;">
            <header>
                <h1>Amazon Connect - Custom Implementation of Customer Chat</h1>
            </header>

            <form name="contactDetails" id="contactDetails" style="padding-top: 30px">
                <fieldset>
                    <div>
                        <table>
                            <tbody>
                                <tr>
                                    <td>
                                        <label for="firstName"
                                            style="width: 128px; padding-right: 25px; padding-bottom: 10px;">Solution
                                            Example:</label>
                                    </td>
                                    <td>
                                        <input name="firstName" type="text" id="firstName" placeholder="First Name"
                                            style="width:161px;">
                                    </td>
                                    <td style="padding-left: 10px;">
                                        <input type="submit" style="padding-left: 10px;" class="submit" id="startChat"
                                            value="Start Chat"></input>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </form>
        </section>
        <section class="section-chat" id="section-chat" style="display: none; float: right; width: 50%;">
            <div id="root"></div>
        </section>
    </div>

    <script>
        $(document).ready((a) => {
            connect.ChatInterface.init({
                containerId: 'root' // This is the id of the container where you want the widget to reside
            });
        });

        $(function () {
            $('#contactDetails').submit(function (e) {
                e.preventDefault();

                customerName = $('#firstName').val();
                if (!customerName) {
                    alert('you must enter a name & username');
                    document.getElementById("contactDetails").reset();
                } else {
                    var contactFlowId = ""; // TODO: Fill in
                    var instanceId = ""; // TODO: Fill in
                    var apiGatewayEndpoint = ""; // TODO: Fill in with the API Gateway endpoint created by your CloudFormation template

                    console.log("this is the first name:" + customerName);
                    document.getElementById("contactDetails").reset();

                    connect.ChatInterface.initiateChat({
                        name: customerName,
                        region: "", // TODO: Fill in
                        apiGatewayEndpoint: apiGatewayEndpoint,
                        contactAttributes: JSON.stringify({
                            "customerName": customerName
                        }),
                        contactFlowId: contactFlowId,
                        instanceId: instanceId
                    },successHandler, failureHandler);

                }
            });
        });

        function successHandler(chatSession) {
            console.log("success!");
            $('#section-chat').fadeIn(400);

            chatSession.onChatDisconnected(function(data) {
                $('#section-chat').hide('slide');
            });
        }

        function failureHandler(error) {
            console.log("There was an error: ");
            console.log(error);
        }
    </script>

</body>
